<template>
    <el-main>
        <!-- 面包屑 -->
        <el-breadcrumb :separator-icon="ArrowRight">
            <el-breadcrumb-item class="font-bold">首页</el-breadcrumb-item>
            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
        </el-breadcrumb>
        <br>
        <!-- 搜索框 -->
        <el-row :gutter="10" v-model="formInline">
            <span class="ml-2.5 mt-1">搜索：</span>
            <el-col :span="6">
                <el-input type="text" v-model="formInline.userName" placeholder="请输入用户名"></el-input>
            </el-col>
            <el-col :span="3">
                <el-button type="primary" plain size="medium" @click="getData(formInline)">搜索</el-button>
            </el-col>
        </el-row>
        <!-- 表格 -->
        <div class="mt-4">
            <el-table :data="tableData">
                <el-table-column label="用户头像" width="80">
                    <template #default="scope">
                        <img :src="`http://127.0.0.1:8081${scope.row.userImage}`" style="width: 100%" />
                    </template>
                </el-table-column>
                <el-table-column prop="userName" label="用户名" width="170"></el-table-column>
                <el-table-column prop="age" label="年龄" width="100"></el-table-column>
                <el-table-column prop="sex" label="性别" width="100"></el-table-column>
                <el-table-column prop="name" label="姓名" width="120"></el-table-column>
                <el-table-column prop="email" label="邮箱" width="200"></el-table-column>
                <el-table-column prop="phone" label="用户联系方式" width="180"></el-table-column>
                <el-table-column prop="status" label="用户状态" width="110"></el-table-column>
                <el-table-column fixed="right" label="操作" width="120">
                    <template #default="scope">
                        <el-button type="danger" size="small" @click="updateJoinBlackList(scope.row.userId)"
                            v-if="scope.row.status == 0"> 加入黑名单 </el-button>
                        <el-button type="success" size="small" @click="updateRemoveBlackList(scope.row.userId)" v-else>
                            移出黑名单 </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination class="text-center mt-4" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="query.pageNum" :page-sizes="[10, 20, 50]" :page-size="query.pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="query.total">
            </el-pagination>
        </div>
    </el-main>
</template>

<script >
import { ArrowRight } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import axios from 'axios'
export default {
    data() {
        return {
            formInline: {// 搜索栏
                userName: '',
            },
            tableData: [],
            query: {//分页数据
                pageNum: 1,// 默认页码
                pageSize: 10,
                total: 5,// 数据量
            }
        };
    },
    mounted() {
        this.getData()
    },
    methods: {
        getData() {
            axios( {
                url: 'http://127.0.0.1:8081/api/admin/selectUserByQuery',
                method: 'post',
                params: {
                    token: window.localStorage.getItem( "adminToken" ),
                    userName: this.formInline.userName,
                    limit: this.query.pageSize,
                    page: this.query.pageNum,
                },
            } ).then( res => {
                if ( res.data.success === false ) { // 没有卡片；卡片过期；卡片伪造时
                    window.localStorage.removeItem( "adminToken" ) // 删除卡片，跳转到登录页面
                    this.$router.push( '/admin/login' )
                } else {
                    // 数据接收
                    this.tableData = res.data.data.userList
                    this.query.total = res.data.data.total
                }
            } )
        },
        //切换当前页显示的数据条数，执行方法
        handleSizeChange( val ) {
            this.query.pageSize = val
            this.getData()
        },
        //切换页数，执行方法
        handleCurrentChange( val ) {
            this.query.pageNum = val
            this.getData()
        },
        // 加入黑名单
        updateJoinBlackList( userId ) {
            ElMessageBox.confirm(
                '确认将该用户移入黑名单吗？',
                '加入黑名单',
                {
                    confirmButtonText: '确认',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            ).then( () => {
                axios( {
                    url: 'http://127.0.0.1:8081/api/admin/updateJoinBlackList',
                    method: 'post',
                    params: {
                        token: window.localStorage.getItem( "adminToken" ),
                        userId: userId,
                    },
                } ).then( res => {
                    if ( res.data.success === false ) { // 没有卡片；卡片过期；卡片伪造时
                        window.localStorage.removeItem( "adminToken" ) // 删除卡片，跳转到登录页面
                        this.$router.push( '/admin/login' )
                    } else {
                        this.$message.success( res.data.message )
                        this.getData()
                    }
                } )
            } ).catch( () => {
                ElMessage( {
                    type: 'info',
                    message: '取消移入用户黑名单',
                } )
            } )
        },
        // 移出黑名单
        updateRemoveBlackList( userId ) {
            axios( {
                url: 'http://127.0.0.1:8081/api/admin/updateRemoveBlackList',
                method: 'post',
                params: {
                    token: window.localStorage.getItem( "adminToken" ),
                    userId: userId,
                },
            } ).then( res => {
                if ( res.data.success === false ) { // 没有卡片；卡片过期；卡片伪造时
                    window.localStorage.removeItem( "adminToken" ) // 删除卡片，跳转到登录页面
                    this.$router.push( '/admin/login' )
                } else {
                    this.$message.success( res.data.message )
                    this.getData()
                }
            } )
        },
    }
};
</script>
<style scoped></style>
  